<template>
  <div class="project1" :style="{backgroundImage: 'url('+ bg +')' }">
    <cheader :pageIndex="pageIndex"></cheader>
    <img src="./banner.png" alt="" class="banner">
    <div class="pen">
      <div class="p1-title">
        <div class="tWrap">
          <div class="t">
            <img src="@/common/img/ball1.png" alt="">
            <h2>"以笔为旗, 书写大爱"</h2>
            <i></i>
          </div>
        </div>
        <div class="bWrap">
          <div class="b">
            <h3>书法作品大合集</h3>
            <i @click="goToList(0, 0, 0, '')">更多</i>
          </div>
        </div>
      </div>
      <div class="s1" v-if="penArr1.length>1">
        <swiper :options="swiper1Option" ref="s1Swiper">
          <!-- slides -->
          <swiper-slide v-for="item in penArr1" :key="item.id" :data-did='item.id' :style="{backgroundImage: 'url('+ item.cover +')'}">
            <div class="title" :data-did='item.id'>
              <span :data-did='item.id'>
                <img src="@/common/img/quotes1.png" alt="">
                {{item.title.length>8?item.title.substring(0, 8)+'...' : item.title}}
                <img src="@/common/img/quotes2.png" alt="" v-if="item.title.length<8">
              </span>
            </div>
            <!-- <img :src="item.cover" alt="" :data-did='item.id'> -->
            <font-awesome-icon icon="pen" class="icon"/>
          </swiper-slide>
        </swiper>
        <div class="fake1"></div>
        <div class="fake2"></div>
      </div>
      <div class="s2" v-if="penArr2.length">
        <swiper :options="swiper2Option" ref="s2Swiper">
          <!-- slides -->
          <swiper-slide v-for="item in penArr2" :key="item.id" :data-did='item.id' :style="{backgroundImage: 'url('+ item.cover +')'}">
            <div :data-did='item.id'></div>
            <h3 :data-did='item.id'>{{item.title.length>8?item.title.substring(0, 8)+'...' : item.title}}</h3>
            <!-- <img :src="item.cover" alt=""> -->
          </swiper-slide>
        </swiper>
        <img src="@/common/img/l.png" class="left btn" @click="penS2l" alt="">
        <img src="@/common/img/r.png" class="right btn" @click="penS2r" alt="">
      </div>
    </div>
    <div class="draw">
      <div class="p1-title">
        <div class="tWrap">
          <div class="t">
            <img src="@/common/img/ball1.png" alt="">
            <h2>"丹青妙手，聚暖生春"</h2>
            <i></i>
          </div>
        </div>
        <div class="bWrap">
          <div class="b">
            <h3>平面绘画作品大合集</h3>
            <i @click="goToList(0, 1, 1, '')">更多</i>
          </div>
        </div>
      </div>
      <div class="wrap">
        <div class="s3">
          <swiper :options="swiper3Option" ref="s3Swiper" v-if="drawArr1.length">
            <!-- slides -->
            <swiper-slide v-for="item in drawArr1" :key="item.id" :style="{backgroundImage: 'url('+ item.cover +')'}" :data-did='item.id'>
              <span class="cover" :data-did='item.id'></span>
              <font-awesome-icon :icon="['far', 'image']" class="icon"/>
              <h3 :data-did='item.id'>{{item.title.length>14?item.title.substring(0, 14)+'...' : item.title}}</h3>
              <!-- <h4 :data-did='item.id'>作者: {{item.writer}}</h4> -->
              <!-- <img :src="item.cover" alt=""> -->
            </swiper-slide>
          </swiper>
          <div class="fake1" v-if="drawArr1.length"></div>
          <div class="fake2" v-if="drawArr1.length"></div>
        </div>
        <div class="s4">
          <swiper :options="swiper4Option" ref="s4Swiper" v-if="drawArr2.length>0">
            <swiper-slide :style="{backgroundImage: 'url('+ item.cover +')' }" v-for="item in drawArr2" :key="item.id" :data-did='item.id'>
              <!-- <span class="cover" :style="{backgroundImage: 'url('+ item.cover +')'}" :data-did='item.id'>
              </span> -->
              <span class="info" :data-did='item.id'>
                <h3 :data-did='item.id'>{{item.title.length>20?item.title.substring(0, 20)+'...' : item.title}}</h3>
                <!-- <h4 :data-did='item.id'>作者: {{item.writer}}</h4> -->
              </span>
            </swiper-slide>
          </swiper>
          <div class="btnWrap">
            <img src="@/common/img/t.png" class="left btn" @click="penS4l" alt="" v-if="drawArr2.length">
            <img src="@/common/img/b.png" class="right btn" @click="penS4r" alt="" v-if="drawArr2.length">
          </div>
        </div>
      </div>
    </div>
    <div class="poem">
      <div class="p1-title">
        <div class="tWrap">
          <div class="t">
            <img src="@/common/img/ball1.png" alt="">
            <h2>"字字珠玑，心灯长明"</h2>
            <i></i>
          </div>
        </div>
        <div class="bWrap">
          <div class="b">
            <h3>诗词作品</h3>
            <i @click="goToList(0, 2, 2, '')">更多</i>
          </div>
        </div>
      </div>
      <ul>
        <li :class="poemIndex==0?'active': ''" @mouseenter="changePoem" data-index=0 v-if="poemArr.length" @click="goJump" :data-did="poemArr[0].id">
          <span class="bg" :style="{backgroundImage: 'url('+ poemArr[0].cover +')' }" :data-did="poemArr[0].id"></span>
          <div class="infoWrap" :data-did="poemArr[0].id">
            <h3 :data-did="poemArr[0].id">
              <img src="@/common/img/quotes1.png" alt="">
              {{poemArr[0].title.length>10?poemArr[0].title.substring(0, 10)+'...' : poemArr[0].title}}
              <img src="@/common/img/quotes2.png" alt="" v-if="poemArr[0].title.length<10">
            </h3>
          </div>
        </li>
        <li :class="poemIndex==1?'active': ''" @mouseenter="changePoem" data-index=1 v-if="poemArr.length" @click="goJump" :data-did="poemArr[1].id">
          <span class="bg" :style="{backgroundImage: 'url('+ poemArr[1].cover +')' }" :data-did="poemArr[1].id"></span>
          <div class="infoWrap" :data-did="poemArr[1].id">
            <h3 :data-did="poemArr[1].id">
              <img src="@/common/img/quotes1.png" alt="">
              {{poemArr[1].title.length>10?poemArr[1].title.substring(0, 10)+'...' : poemArr[1].title}}
              <img src="@/common/img/quotes2.png" alt="" v-if="poemArr[1].title.length<10">
            </h3>
          </div>
        </li>
        <li :class="poemIndex==2?'active': ''" @mouseenter="changePoem" data-index=2 v-if="poemArr.length" @click="goJump" :data-did="poemArr[2].id">
          <span class="bg" :style="{backgroundImage: 'url('+ poemArr[2].cover +')' }" :data-did="poemArr[2].id"></span>
          <div class="infoWrap" :data-did="poemArr[2].id">
            <h3 :data-did="poemArr[2].id">
              <img src="@/common/img/quotes1.png" alt="">
              {{poemArr[2].title.length>10?poemArr[2].title.substring(0, 10)+'...' : poemArr[2].title}}
              <img src="@/common/img/quotes2.png" alt="" v-if="poemArr[2].title.length<10">
            </h3>
          </div>
        </li>
        <li :class="poemIndex==3?'active': ''" @mouseenter="changePoem" data-index=3 v-if="poemArr.length" @click="goJump" :data-did="poemArr[3].id">
          <div class="bg" :style="{backgroundImage: 'url('+ poemArr[3].cover +')' }" :data-did="poemArr[3].id"></div>
          <div class="infoWrap" :data-did="poemArr[3].id">
            <h3 :data-did="poemArr[3].id">
              <img src="@/common/img/quotes1.png" alt="">
              {{poemArr[3].title.length>10?poemArr[3].title.substring(0, 10)+'...' : poemArr[3].title}}
              <img src="@/common/img/quotes2.png" alt="" v-if="poemArr[3].title.length<10">
            </h3>
          </div>
        </li>
      </ul>
    </div>
    <div class="mv">
      <div class="p1-title">
        <div class="tWrap">
          <div class="t">
            <img src="@/common/img/ball1.png" alt="">
            <h2>"匠心独具，心系疫情"</h2>
            <i></i>
          </div>
        </div>
        <div class="bWrap">
          <div class="b">
            <h3>原创MV作品大合集</h3>
            <i @click="goToList(0, 3, 3, '')">更多</i>
          </div>
        </div>
      </div>
      <div class="bigMv" v-if="bigMvArr.length">
        <div class="wrap">
          <div class="cover"></div>
          <video :src="bigMvArr[0].url" controls="controls" width="100%;" height="100%;" object-fit:="" fill=""></video>
        </div>
        <div class="info">
          <h3>{{bigMvArr[0].title}}</h3>
          <h4 v-if="bigMvArr[0].writer">作者: {{bigMvArr[0].writer}}</h4>
        </div>
      </div>
      <div class="s5" v-if="mvArr.length>1">
        <swiper :options="swiper5Option" ref="s5Swiper">
          <swiper-slide :style="{backgroundImage: 'url('+ item.cover +')' }" v-for="item in mvArr" :key="item.id" :data-did='item.id'>
            <span class="cover" :data-did='item.id'>
              <h3 :data-did='item.id'>{{item.title.length>10?item.title.substring(0, 10)+'...' : item.title}}</h3>
              <h4 :data-did='item.id'>{{item.durtime}}</h4>
            </span>
          </swiper-slide>
        </swiper>
      </div>
      <div class="btnWrap">
        <img src="./l.png" class="left btn" @click="penS5l" alt="" v-if="bigMvArr.length">
        <img src="./r.png" class="right btn" @click="penS5r" alt="" v-if="bigMvArr.length">
      </div>
    </div>
    <cfooter></cfooter>
  </div>
</template>
<script>
import cheader from '@/components/cheader/cheader'
import cfooter from '@/components/cfooter/cfooter'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import api from '@/common/js/api'
import '@/common/css/swiper.min.css'
export default {
  data () {
    return {
      bg: require('@/common/img/bg.png'),
      pageIndex: 0,
      // 书法作品1
      swiper1Option: {
        effect: 'fade',
        direction: 'vertical',
        loop: true,
        autoplay: true,
        on: {
          click: (e) => {
            let did = e.target.dataset.did
            if (did) {
              this.goToDetail(0, 0, did)
            } else {
              return false
            }
          }
        }
      },
      // 书法作品2
      swiper2Option: {
        slidesPerView: 3,
        spaceBetween: 20,
        loop: true,
        autoplay: true,
        on: {
          click: (e) => {
            let did = e.target.dataset.did
            this.goToDetail(0, 0, did)
          }
        }
      },
      // 绘画作品1
      swiper3Option: {
        effect: 'fade',
        direction: 'vertical',
        loop: true,
        autoplay: true,
        on: {
          click: (e) => {
            let did = e.target.dataset.did
            if (did) {
              this.goToDetail(0, 1, did)
            } else {
              return false
            }
          }
        }
      },
      // 绘画作品2
      swiper4Option: {
        direction: 'vertical',
        slidesPerView: 3,
        spaceBetween: 20,
        loop: true,
        // autoplay: true,
        on: {
          click: (e) => {
            let did = e.target.dataset.did
            this.goToDetail(0, 1, did)
          }
        }
      },
      // 诗词作品
      poemIndex: 0,
      // MV
      swiper5Option: {
        slidesPerView: 3,
        spaceBetween: 25,
        loop: true,
        autoplay: true,
        on: {
          click: (e) => {
            let did = e.target.dataset.did
            this.goToDetail(0, 3, did)
          }
        }
      },
      penArr1: [],
      penArr2: [],
      drawArr1: [],
      drawArr2: [],
      poemArr: [],
      bigMvArr: [],
      mvArr: []
    }
  },
  computed: {
    swiper1 () {
      return this.$refs.s1Swiper.swiper
    },
    swiper2 () {
      return this.$refs.s2Swiper.swiper
    },
    swiper3 () {
      return this.$refs.s3Swiper.swiper
    },
    swiper4 () {
      return this.$refs.s4Swiper.swiper
    },
    swiper5 () {
      return this.$refs.s5Swiper.swiper
    }
  },
  created () {
  },
  mounted () {
    api.project1Index().then(res => {
      if (res.data.result === '0') {
        this.penArr1 = res.data.data.calligraphy.big
        this.penArr2 = res.data.data.calligraphy.small
        this.drawArr1 = res.data.data.paint.big
        this.drawArr2 = res.data.data.paint.small
        this.poemArr = res.data.data.potery
        this.bigMvArr = res.data.data.video.big
        this.mvArr = res.data.data.video.small
      }
    }).then(() => {
      this.swiper1.el.onmouseover = () => {
        this.swiper1.autoplay.stop()
      }
      this.swiper1.el.onmouseout = () => {
        this.swiper1.autoplay.start()
      }
      this.swiper2.el.onmouseover = () => {
        this.swiper2.autoplay.stop()
      }
      this.swiper2.el.onmouseout = () => {
        this.swiper2.autoplay.start()
      }
      this.swiper3.el.onmouseover = () => {
        this.swiper3.autoplay.stop()
      }
      this.swiper3.el.onmouseout = () => {
        this.swiper3.autoplay.start()
      }
      this.swiper4.el.onmouseover = () => {
        this.swiper4.autoplay.stop()
      }
      this.swiper4.el.onmouseout = () => {
        this.swiper4.autoplay.start()
      }
      this.swiper5.el.onmouseover = () => {
        this.swiper5.autoplay.stop()
      }
      this.swiper5.el.onmouseout = () => {
        this.swiper5.autoplay.start()
      }
    })
    // console.log('this is current swiper instance object', this.swiper)
    // this.swiper1.slideTo(1, 1000, false)
  },
  components: {
    cheader,
    cfooter,
    swiper,
    swiperSlide
  },
  methods: {
    penS2l () {
      this.swiper2.slidePrev()
    },
    penS2r () {
      this.swiper2.slideNext()
    },
    penS4l () {
      this.swiper4.slidePrev()
    },
    penS4r () {
      this.swiper4.slideNext()
    },
    changePoem (e) {
      this.poemIndex = e.target.dataset.index
    },
    penS5l () {
      this.swiper5.slidePrev()
    },
    penS5r () {
      this.swiper5.slideNext()
    },
    // 去专题列表页 (专题几，第几个模块, 后端参数type, 后端参数id)
    goToList (project, blc, postType, postId) {
      this.$router.push({
        name: 'projectList',
        query: {
          project: project,
          blc: blc,
          postType: postType,
          postId: postId
        }
      })
    },
    // 去文章详情页 (专题几，第几个模块, 后端参数id, 后端参数id)
    goToDetail (project, blc, did) {
      this.$router.push({
        name: 'projectDetail',
        query: {
          project: project,
          blc: blc,
          did: did
        }
      })
    },
    goJump (e) {
      let did = e.target.dataset.did
      this.goToDetail(0, 2, did)
    }
  }
}
</script>
<style lang="scss" scoped>
  $tjBlue: #59bed9;
  .project1 {
    background: no-repeat top center $tjBlue;
    .p1-title {
      .t {
        height: 50px;
        position: relative;
        display: inline-block;
        img {
          position: absolute;
          left: 0;
          top: 0;
        }
        h2 {
          font-size: 26px;
          color: #fff;
          position: relative;
          top: 20px;
          margin-left: 24px;
        }
        i {
          width: 6px;
          height: 6px;
          position: absolute;
          right: -3px;
          bottom: 4px;
          background-color: #ffe75f;
        }
      }
      .b {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        position: relative;
        h3 {
          font-size: 20px;
          color: #fff;
          position: relative;
          z-index: 3;
        }
        i {
          width: 70px;
          height: 24px;
          line-height: 25px;
          text-align: center;
          border-radius: 50px;
          color: #fff;
          font-size: 14px;
          font-style: normal;
          cursor: pointer;
          background-color: rgba($color: #fff, $alpha: .3);
        }
      }
    }
    .banner {
      width: 900px;
      height: 570px;
      display: block;
      margin: 0 auto;
    }
    .pen {
      width: 900px;
      min-height: 733px;
      margin: 0 auto 36px;
      .p1-title {
        margin-bottom: 30px;
      }
      .s1 {
        margin-bottom: 20px;
        .swiper-container {
          cursor: pointer;
          background-color: #ccc;
          width: 900px;
          height: 378px;
          border-radius: 10px;
          .swiper-slide {
            overflow: hidden;
            background: center no-repeat;
            background-size: cover;
            .title {
              display: block;
              width: 80px;
              height: 240px;
              background-image: linear-gradient(#5a5a5a, transparent);
              text-align: center;
              color: #fff;
              position: relative;
              z-index: 2;
              span {
                display: block;
                margin: 0 auto;
                padding-top: 20px;
                width: 25px;
                font-size: 20px;
                line-height: 26px;
                img {
                  position: static;
                  width: 25px;
                }
              }
            }
            .icon {
              color: #fff;
              position: absolute;
              right: 28px;
              bottom: 28px;
              font-size: 20px;
            }
            img {
              position: absolute;
              top: 0;
              left: 0;
            }
          }
        }
        .fake1 {
          width: 770px;
          height: 30px;
          background-color: #fff;
          opacity: .4;
          margin: 0 auto;
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;
        }
        .fake2 {
          width: 836px;
          height: 15px;
          background-color: #fff;
          opacity: .5;
          margin: 0 auto;
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;
          position: relative;
          top: -30px;
        }
      }
      .s2 {
        position: relative;
        .swiper-container {
          // background-color: #ccc;
          // border-radius: 20px;
          width: 850px;
          .swiper-slide {
            width: 270px;
            height: 170px;
            background: center no-repeat;
            background-size: cover;
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;
            div {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background-image: linear-gradient(transparent, #000);
            }
            h3 {
              font-size: 20px;
              color: #fff;
              position: absolute;
              left: 10px;
              bottom: 10px;
              font-size: 18px;
            }
            img {
              width: 270px;
              height: 170px;
              display: block;
            }
          }
        }
        .btn {
          display: block;
          width: 12px;
          height: 26px;
          // background-color: #ccc;
          position: absolute;
          top: 76px;
          cursor: pointer;
          transition: all .3s;
          &:hover {
            transform: scale(1.3);
          }
        }
        .left {
          left: 0;
        }
        .right {
          right: 0;
        }
      }
    }
    .draw {
      width: 900px;
      margin: 0 auto 35px;
      min-height: 595px;
      .p1-title {
        margin-bottom: 30px;
      }
      .wrap {
        display: flex;
        justify-content: space-between;
        .s3 {
          position: relative;
          .swiper-container {
            background-color: #ccc;
            width: 450px;
            height: 450px;
            border-radius: 10px;
            .swiper-slide {
              background: #ccc center no-repeat;
              background-size: cover;
              cursor: pointer;
              .cover {
                position: absolute;
                top: 50%;
                left: 0;
                right: 0;
                bottom: 0;
                background-image: linear-gradient(transparent, #000);
              }
              .icon {
                font-size: 26px;
                color: #fff;
                position: absolute;
                left: 40px;
                bottom: 75px;
              }
              h3 {
                position: absolute;
                left: 31px;
                bottom: 30px;
                color: #fff;
                font-size: 24px;
              }
              h4 {
                position: absolute;
                right: 30px;
                bottom: 32px;
                color: #fff;
                font-size: 14px;
              }
              img {
                display: block;
                width: 450px;
                height: 450px;
              }
            }
          }
          .fake1 {
            position: absolute;
            right: -20px;
            top: 44px;
            width: 20px;
            height: 363px;
            background-color: #fff;
            opacity: .4;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
          }
          .fake2 {
            position: absolute;
            right: -10px;
            top: 21px;
            width: 10px;
            height: 408px;
            background-color: #fff;
            opacity: .3;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
          }
        }
        .s4 {
          .swiper-container {
            width: 410px;
            height: 422px;
            .swiper-slide {
              height: 130px;
              width: 410px;
              background: #ccc center no-repeat;
              background-size: cover;
              border-radius: 10px;
              overflow: hidden;
              cursor: pointer;
              .cover {
                height: 36px;
                width: 100%;
                display: block;
                position: absolute;
                left: 0;
                bottom: 0;
                z-index: 1;
                background: bottom center no-repeat;
                background-size: cover;
                &::after {
                  content: "";
                  width:100%;
                  height:100%;
                  position: absolute;
                  left:0;
                  top:3px;
                  background: inherit;
                  filter: blur(3px);
                  z-index: 2;
                }
              }
              .info {
                height: 65px;
                background-image: linear-gradient(transparent, #000);
                line-height: 36px;
                width: 100%;
                position: absolute;
                left: 0;
                bottom: 0px;
                z-index: 3;
                display: flex;
                justify-content: space-between;
                h3 {
                  // margin-left: 16px;
                  font-size: 16px;
                  color: #fff;
                  position: absolute;
                  left: 16px;
                  top: 25px;
                }
                h4 {
                  margin-right: 20px;
                  font-size: 12px;
                  color: #fff;
                }
              }
            }
          }
          .btnWrap {
            text-align: center;
            font-size: 0;
            margin-top: 16px;
            .btn {
              height: 12px;
              width: 26px;
              display: inline-block;
              // background-color: red;
              margin: 0 48px;
              cursor: pointer;
              transition: all .3s;
              &:hover {
                transform: scale(1.3);
              }
            }
          }
        }
      }
    }
    .poem {
      width: 900px;
      margin: 0 auto 40px;
      min-height: 479px;
      .p1-title {
        margin-bottom: 30px;
      }
      ul {
        width: 900px;
        height: 355px;
        // background-color: #ccc;
        font-size: 0;
        border-radius: 10px;
        overflow: hidden;
        li {
          display: inline-block;
          vertical-align: top;
          height: 100%;
          font-size: 30px;
          width: 150px;
          transition: all .6s;
          position: relative;
          overflow: hidden;
          cursor: pointer;
          &.active {
            width: 450px;
            .bg::after {
              filter: none;
            }
            .infoWrap {
              width: 54px;
              h3 {
                font-size: 20px;
              }
            }
          }
          .bg {
            position: absolute;
            top: 0;
            left: -4px;
            right: -4px;
            bottom: 0;
            background: center 0px no-repeat $tjBlue;
            background-size: cover;
            z-index: 1;
            &::after {
              content: "";
              width:100%;
              height:100%;
              position: absolute;
              left:0;
              top:0;
              background: inherit;
              filter: blur(4px);
              z-index: 2;
            }
          }
          .infoWrap {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: rgba($color: #000000, $alpha: 0.5);
            z-index: 2;
            transition: all .6s;
            h3 {
              width: 10px;
              line-height: 22px;
              color: #fff;
              opacity: .8;
              font-size: 18px;
              position: absolute;
              left: 50%;
              top: 50%;
              word-wrap: break-word;
              transform: translateX(-50%)  translateY(-50%);
              img {
                display: inline-block;
                width: 20px;
              }
            }
          }
        }
      }
    }
    .mv {
      min-height: 960px;
      .p1-title {
        margin-bottom: 30px;
      }
      width: 900px;
      margin: 0 auto;
      padding-bottom: 26px;
      .bigMv {
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 20px;
        .wrap {
          width:900px;
          height: 505px;
        }
        .info {
          height: 52px;
          line-height: 52px;
          background-color: #fff;
          display: flex;
          justify-content: space-between;
          h3 {
            display: inline-block;
            margin-left: 20px;
            color: #3c3c3c;
            font-size: 20px;
          }
          h4 {
            display: inline-block;
            margin-right: 37px;
            font-size: 16px;
            color: #3c3c3c;
          }
        }
      }
      .s5 {
        position: relative;
        .swiper-container {
          width: 900px;
          .swiper-slide {
            width: 284px;
            height: 160px;
            background: center no-repeat;
            background-size: cover;
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;
            .cover {
              display: block;
              width: 100%;
              height: 50%;
              background-image: linear-gradient(transparent, #000);
              position: absolute;
              left: 0;
              bottom: 0;
              h3 {
                position: absolute;
                left: 20px;
                bottom: 15px;
                color: #fff;
              }
              h4 {
                position: absolute;
                right: 20px;
                bottom: 15px;
                color: #fff;
              }
            }
          }
        }
        .btn {
          display: block;
          width: 12px;
          height: 26px;
          background-color: #ccc;
          position: absolute;
          top: 76px;
          cursor: pointer;
        }
        .left {
          left: 0;
        }
        .right {
          right: 0;
        }
      }
      .btnWrap {
        text-align: center;
        font-size: 0;
        .btn {
          width: 65px;
          height: 43px;
          display: inline-block;
          vertical-align: top;
          // background-color: #ccc;
          margin-top: 30px;
          cursor: pointer;
          &.left {
            margin-right: 77px;
            transition: transform .3s;
            &:hover {
              transform: translateX(-10px);
            }
          }
          &.right {
            margin-left: 77px;
            transition: transform .3s;
            &:hover {
              transform: translateX(10px);
            }
          }
        }
      }
    }
    .footer {
      height: 90px;
      overflow: hidden;
      background-color: rgba($color: #000000, $alpha: 0.1);
      .content {
        width: 900px;
        line-height: 100px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        color: #fff;
      }
    }
  }
</style>
